<template>
  <div class="home">
	  <home-header class='home-header' :city='city'></home-header>
	  <home-swiper :swiperList='swiperList'></home-swiper>
	  <home-catalog></home-catalog>
	  <span class="span_line"></span>
	  <homeIconBtn></homeIconBtn>
	  <homeHotActive></homeHotActive>
	  <home-hot></home-hot>
	  <div class="AppDownload" @click='DownClick'>
		  <img class='DownloadImg' src="//file.40017.cn/appresource/image/touch/index/touch_index_middle.jpg">
	  </div>
	  <homeHotRecommend :HotAdressName='HotAdressName' :HotImgContent="HotImgContent"></homeHotRecommend>
	  <home-advantage></home-advantage>
	  <homeFooter></homeFooter>
	   <div class="app_nav" >
	  		  <img class='app_nav_img' src="//pic5.40017.cn/01/000/08/e3/rBLkBlsfdWKAAtLbAAAu5Udn1O4922.png" v-show='isSmall' @click='isShow'>
			  <div class='appDown' v-show='isBig'>
				  <img src="//pic5.40017.cn/03/000/46/94/rBANB1xjxHeAaotJAADwRHcFYKg801.png" >
				  <div class='downMaskBtn' @click='DownClick'></div>
				  <div class="canselMaskBtn" @click='isShow'></div>
			  </div>
	  </div>
  </div>
</template>

<script>
	import axios from 'axios'
	import homeHeader from './components/homeHeader'
	import homeSwiper from './components/homeSwiper'
	import homeCatalog from './components/homeCatalog'
	import homeIconBtn from './components/homeIconBtn'
	import homeHot from './components/homeHot'
	import homeHotRecommend from './components/homeHotRecommend'
	import homeHotActive from './components/homeHotActive'
	import homeAdvantage from './components/homeAdvantage'
	import homeFooter from './components/homeFooter'
export default {
  name: 'Home',
  components:{
	  homeHeader,
	  homeSwiper,
	  homeCatalog,
	  homeIconBtn,
	  homeHot,
	  homeHotRecommend,
	  homeHotActive,
	  homeAdvantage,
	  homeFooter
  },
  data(){
	  return{
		  city:'',
		  swiperList:[],
		  HotAdressName:[],
		  HotImgContent:[],
		  isSmall:true,
		  isBig:false
	  }
  },
  methods:{
	  getHomeData(){
		  axios.get("/api/index.json").then(this.getDataSucc)
	  },
	  getDataSucc(res){
		  res=res.data
		  if(res.data){
			  const data=res.data
			  this.city=data.city
			  this.swiperList=data.swiperList
			  this.HotAdressName=data.HotAdressName
			  this.HotImgContent=data.HotImgContent
		  }
	  },
	  isShow(){
		  this.isSmall=!this.isSmall
		  this.isBig=!this.isBig
	  },
	  DownClick(){
		  window.location.href='https://m.17u.cn/app/links/web/main?url=https%3a%2f%2fappnew.ly.com%2fh5%2fVue%2f%3ffrom%3dmobile%23%2fnewvip&wakeUid=2edbea127d02474783a4297b83911a70&wakeRedirect=1'
	  }
  },
  mounted(){
	  this.getHomeData()
	  window.scrollTo(0,0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.home{
	width:100%;
	height: auto;
	position: relative;
}
.span_line{
	position: absolute;
	width:90%;
	height:1px;
	background:#e4e4e4;
	left:5%;
	opacity: 0.5;
}
</style>
<style lang='stylus' scoped>
.AppDownload
	.DownloadImg
		width:100%
		border-top:8px solid #e4e4e4
		border-bottom:8px solid #e4e4e4
.app_nav
	.app_nav_img
		position:fixed
		right:10px
		bottom:20px
		width:60px
		height:50px
	.appDown
		position:fixed
		right:0
		top:0
		bottom:0
		left:0
		background:rgba(0,0,0,.5)
		z-index:200
		img
			width:100%
			position:fixed
			bottom:0
		.downMaskBtn
			position:fixed
			bottom:0.4rem
			left:2.8rem
			width:3.8rem
			height:0.9rem
			background:#666
			opacity:0
		.canselMaskBtn
			position:fixed
			bottom:3.3rem
			right:0.15rem
			width:0.5rem
			height:0.9rem
			background:#666
			opacity:0
</style>
